<script setup lang="ts">
import type { CategoryTopItem } from '@/types/category'
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShow,
  onHide,
  onUnload,
} from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import PageSkeleton from './components/PageSkeleton.vue'
import DaDropdown from '@/components/da-dropdown/index.vue'
import { getNamesValues, getValueName } from '@/utils/nameValues'
import { manualAssignEngineer, serviceProviderGetWoList } from '@/services/case'
import Reservation from '@/pages/mycase/components/Reservation.vue'

import SignIn from '@/components/signIn.vue'
import DispatchEngineer from '@/pages/mycase/components/DispatchEngineer.vue'
// 是否数据加载完毕
const isFinish = ref(false)
// 当前下拉刷新状态
const isTriggered = ref(false)
// 搜索输入框
const searchValue = ref('')
// 列表数据
const List: any = ref([])
// 当前页数
const page = ref(1)
// 总条数
const total = ref(0)

let workstatus = ref([])
let worktype = ref()
const dropdownMenuList = [
  {
    title: '工单类型',
    type: 'filter',
    prop: 'worktype',
    // 默认选中单选2、多选2、3、滑动30
    // value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
    options: [
      {
        title: '',
        type: 'checkbox',
        prop: 'selected',
        // options: getNamesValues('SERVICE.WO.TYPE'),
        options: getNamesValues('APP.WOTYPE'),
      },
    ],
  },
  {
    title: '工单状态',
    type: 'filter',
    prop: 'workstatus',
    // 默认选中单选2、多选2、3、滑动30
    value: query.woStatus ? { selected: [query.woStatus] } : {},
    options: [
      {
        title: '',
        type: 'checkbox',
        prop: 'selected',
        // options: getNamesValues('WO.STATUS'),
        options: getNamesValues('APP.WOTYPE.STATUS'),
      },
    ],
  },
  // : {
  //   title: '工单状态',
  //   type: 'filter',
  //   prop: 'workstatus',
  //   options: [
  //     {
  //       title: '',
  //       type: 'checkbox',
  //       prop: 'selected',
  //       // options: getNamesValues('WO.STATUS'),
  //       options: getNamesValues('APP.WOTYPE.STATUS'),
  //     },
  //   ],
  // },
]

//筛选弹窗 确认
function handleConfirm(detail: any) {
  console.log('handleConfirm ==>', detail)
  if (detail.workstatus) {
    workstatus.value = detail.workstatus.selected
  }
  if (detail.worktype) {
    worktype.value = detail.worktype.selected
  }

  getData(true)
}

function handleClose(v) {
  console.log('handleClose ==>', v)
}
function handleOpen(v) {
  console.log('handleOpen ==>', v)
}
//跳转详情
function goPage(item) {
  if (item.woType == 1) {
    //安装
    uni.navigateTo({
      url: '/pages/mycase/installCaseInfo?woId=' + item.woId,
    })
  } else if (item.woType == 2) {
    uni.navigateTo({
      url: '/pages/mycase/installCaseInfo?woId=' + item.woId,
    })
  } else if (item.woType == 3) {
    uni.navigateTo({
      url: '/pages/mycase/installCaseInfo?woId=' + item.woId,
    })
  }
}
function searchClick() {
  getData(true)
}
/**
 * 获取工单列表数据
 */
async function getData(refresh: Boolean) {
  if (refresh) {
    page.value = 1
  } else {
    page.value++
  }
  isTriggered.value = true

  try {
    let woType = null
    if (worktype.value) {
      woType = []
      woType.push(worktype.value)
    }
    let status = null
    if (workstatus.value) {
      status = []
      status.push(workstatus.value)
    }
    uni.showLoading()
    const res: any = await serviceProviderGetWoList({
      page: page.value,
      pageSize: 10,
      woType: worktype.value,
      status: workstatus.value,
      keyword: searchValue.value,
    })
    uni.hideLoading()
    if (refresh) {
      //刷新逻辑
      List.value = res?.records
    } else {
      res?.records.forEach((item: any) => {
        List.value.push(item)
      })
    }
    page.value = res?.page
    total.value = res?.total
  } finally {
    isTriggered.value = false
  }
}
const query = defineProps<{ woStatus: number }>()

// 页面加载
const refreshCallback = () => {
  console.log('先尝试是否能刷新！')
  getData(true)
}

onLoad(async () => {
  if (query.woStatus) {
    console.log('woStatus', query.woStatus)
    workstatus.value.push(query.woStatus)
  }
  await getData(true)
  uni.$on('caseListRefresh', refreshCallback)
})

onShow(() => {
  const needRefresh = uni.getStorageSync('needRefresh')
  if (needRefresh) {
    getData(true)
    uni.removeStorageSync('needRefresh')
  }
  uni.$on('caseListRefresh', refreshCallback)
})

onHide(() => {
  uni.$off('caseListRefresh', refreshCallback)
})

onUnload(() => {
  uni.$off('caseListRefresh', refreshCallback)
})

//上啦加载
onReachBottom(() => {
  if (page.value > total.value) {
    uni.showToast({
      title: '已加载完全部',
      icon: 'none',
    })
    return
  }
  getData(false)
})
onPullDownRefresh(() => {
  getData(true)
})
</script>

<template>
  <view class="viewport">
    <!-- 搜索框 -->
    <view class="top_container">
      <view class="search_container">
        <input class="search_input" inputmode="search" confirm-type="search" placeholder="点击搜索主题" v-model="searchValue"
          @confirm="searchClick" />
      </view>
    </view>

    <DaDropdown
      :dropdownMenu="dropdownMenuList"
      themeColor="#54B9CC"
      textColor="#333333"
      :fixTop="true"
      :duration="300"
      @confirm="handleConfirm"
      @close="handleClose"
      @open="handleOpen"
    >
    </DaDropdown>
    <view class="content">
      <view class="order-item" v-for="(item, i) in List" :key="i">
        <view @tap="goPage(item)" class="">
          <view class="order-info">
            <view class="order-title-left">
              <view class="">{{ getValueName('WO.TYPE', item?.woType) }}</view>
              <view class="diliver"> | </view>
              <view class="">{{ item?.woNo }}</view>
            </view>
            <view class="order-title-right">
              <view class="square"> {{ getValueName('APP.WOTYPE.STATUS', item?.status) }}</view>
            </view>
          </view>
          <view class="order-details">
            <text>联系人：{{ item?.contactName }}</text>
            <text>服务地址：{{ item?.address }}</text>
            <text v-if="item.requiredServiceTime && item.requiredServiceTimeRemark"
              >期望时间：{{
                item?.requiredServiceTime + ' ' + item?.requiredServiceTimeRemark
              }}</text
            >
          </view>
        </view>


      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  --nut-primary-color: #54B9CC;
  --pagination-font-size: 20upx;
}

.content {
  min-height: 80%;
  padding: 10rpx 20rpx;
  background: #f7f7f7;
}


.top_container {
    margin: 10rpx 15rpx;
    border-radius: 30rpx;
    border: 2rpx solid #61D7ED;
    // border-image: linear-gradient(180deg, rgba(97, 215, 237, 1), rgba(84, 185, 204, 1)) 2 2;
    display: flex;
    position: sticky;
  }


  .search_container {

    flex-direction: column;
    flex-grow: 1;
    padding: 12rpx 15rpx;
    border-radius: 20rpx;
    margin: 5rpx 20rpx;
  }

  .search_input {
    background-color: white;
    font-size: 26upx;
  }
.order-item {
  display: flex;
  flex-flow: column;
  margin-top: 18rpx;
  width: 100%;
  padding: 27rpx 20rpx;
  border: 1rpx solid #f6f6f6;
  border-radius: 5rpx;
  // box-shadow: 1rpx 0.5rpx 0.5rpx lightgray;
  position: relative;
}

.order-info {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}

.order-title-left {
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.order-title-right {
  position: absolute;
  right: 0;
  top: 20rpx;

  .square {
    height: 48rpx;
    line-height: 48rpx;
    padding-left: 40rpx;
    padding-right: 20rpx;
    text-align: center;
    vertical-align: middle;
    position: relative;
    background-color: #54B9CC;
    font-size: 24upx;
    color: white;
  }

  .square:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 24rpx solid white;
    border-top: 24rpx solid transparent;
    border-bottom: 24rpx solid transparent;
  }
}

.order-details {
  color: #6c757d;
  font-size: 26rpx;
  display: flex;
  flex-flow: column;
  margin-top: 15rpx;
  line-height: 50rpx;
}

.button-grop {
  display: flex;
  flex-flow: row wrap;
  margin: 5rpx;
  justify-self: center;
  justify-content: flex-end;
  .button-operate {
    margin-right: 10rpx;
  }
}

.order-actions {
  display: flex;
  margin-top: 20rpx;
  align-items: flex-end;
  justify-content: flex-end;

  // >nut-button {
  //   margin: 10rpx;
  // }
  .diliver {
    width: 15rpx;
  }

  .order-actions-button {
    margin-right: 10rpx;
    border: #54B9CC solid 1rpx;
    color: #54B9CC;
  }
}
</style>
